<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		
		<view class="box">
			<view class="kong">
			</view>
			<view class="list" v-if="fansList.length">
				<view class="item" v-for="(item,index) in fansList" :key="index">
					<image class="touxiang" :src="item.avatar" mode=""></image>
					<text class="name">{{item.nickname.slice(0,11)}}</text>
				</view>
				
				<u-loadmore class="load-marTop" v-if="fansList.length>=10" :status="status" :load-text="loadText" />
			</view>
			<view class="zanwuyuyue" v-else>
				<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
				<text>暂无粉丝</text>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '粉丝列表',
				fansList:[],
				
				page:1,
				
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onReachBottom() {   ///page 加载
			if(that.status == 'nomore'){
				return
			}
			console.log("触底la")
			that.status = 'loading';
			that.page = ++ that.page;
			setTimeout(() => {
				that.requestData(that.page)
			}, 500)
		},
		onLoad() {
			that=this
			that.requestData(that.page)
		},
		methods: {
			requestData(page){  //https://ask.suoweilai.com/Doctor_getFansList  医生端 - 医生端-获取粉丝列表
				uni.showLoading({
					mask: true
				});
				that.$postAjax1('Doctor_getFansList',{
					page:page
				},function(data){
					// console.log(data,99999)
					
					
					uni.hideLoading()
					if(that.page==1){
						that.fansList=data.data.data
					}else{
						that.fansList=that.fansList.concat(data.data.data)
					}
					if(data.data.data.length<10) that.status = 'nomore';
					else that.status = 'loading';
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	padding-bottom: 100rpx;
	.kong{
		background-color: #F6F6F6;
		height: 16rpx;
		width: 100%;
	}
	background-color: #FFFFFF;
	.list{
		padding: 0 32rpx;
		.item{
			padding: 20rpx 0 ;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			.touxiang{
				display: inline-block;
				width: 84rpx;
				height: 84rpx;
				margin-right: 44rpx;
				border-radius: 50%;
				vertical-align: middle;
			}
			.name{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				vertical-align: middle;
			}
		}
	}

	.zanwuyuyue{
		padding-top: 450rpx;
		text-align: center;
		image{
			display: block;
			margin: auto;
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 50rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #959595;
		}
	}
}
</style>
